<template>
  <div id='home'>
    <div class="top">
      <div class="right">
        <ul>
          <li>
            <span><a href="javascript:;" @click="login">登录</a></span>&nbsp;|
            <span><a href="javascript:;" @click="reg">注册</a></span>
          </li>
          <li><a href="/#/order" @click="activeIndex='12345'">我的订单</a></li>
          <li><a href="/#/collection" @click="activeIndex='12345'">我的收藏</a></li>
        </ul>
        <div class="cart">
          <van-icon name="shopping-cart-o" />
          购物车&nbsp;(0)
        </div>
      </div>
    </div>
    <header>
      <div class="nav">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
          <el-menu-item class="logo" index="32423"><img src="/download.png" alt=""></el-menu-item>
          <el-menu-item index="/index">首页</el-menu-item>
          <el-menu-item index="/allgoods">全部商品</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item class="search">
            <el-input placeholder="请输入搜索内容" v-model="input3">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-menu-item>
        </el-menu>
      </div>
    </header>
    <footer>
      <div class="box">
        <router-view></router-view>
      </div>
      <div class="buttom">
        <div class="but1">
          <span><i class="el-icon-success"></i>七天无理由退换货</span>
          <span><i class="el-icon-success"></i>满99元全场包邮</span>
          <span><i class="el-icon-success"></i>100%保质保证</span>
        </div>
        <div class="but2">
          <img src="" alt="">
        </div>
        <div class="but3">
          <span @click="$router.push('/index')">首页</span>
          <span>|</span>
          <span @click="$router.push('/allgoods')">全部商品</span>
          <span>|</span>
          <span @click="$router.push('/about')">关于我们</span>

        </div>
        <p>商城版权所有 © 2012-2021</p>
      </div>
    </footer>
    <!-- 登录 -->
    <el-dialog title="登录" :visible.sync="dialogFormVisible" width="300px">
      <el-form :model="obj">
        <el-form-item>
          <el-input v-model="obj.uname" autocomplete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="obj.pwd" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">登录</el-button>
      </div>
    </el-dialog>
    <!-- 注册 -->
    <el-dialog title="注册" :visible.sync="dialogFormVisible2" width="300px">
      <el-form :model="upobj">
        <el-form-item>
          <el-input prefix-icon="el-icon-user-solid" v-model="upobj.uname" autocomplete="off" placeholder="请输入账号">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="el-icon-view" v-model="upobj.pwd" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="el-icon-view" v-model="upobj.pwd2" autocomplete="off" placeholder="请再次输入密码">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">注册</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {} from 'vuex'
  export default {
    components: {},
    data() {
      return {
        activeIndex: '/index',
        input3: "",
        dialogFormVisible: false,
        dialogFormVisible2: false,
        obj: {
          uname: '',
          pwd: '',
        },
        upobj: {
          uname: '',
          pwd: '',
          pwd2: '',
        },
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        this.activeIndex = keyPath[0]
      },
      login() {
        this.dialogFormVisible = true
      },
      reg() {
        this.dialogFormVisible2 = true
      },
    },
    mounted() {
      var path = this.$route.path
      // console.log(path);
      this.activeIndex = path
    },
    computed: {}
  }
</script>
<style lang='scss' scoped>
  #home {
    width: 100%;
    height: 100%;
    background: white;

    footer {
      width: 100%;
      height: 100%;
      // background: #000;

      .box {
        width: 1225px;
        height: 460px;
        margin: 20px auto;
      }

      .buttom {
        width: 100%;
        background: #2f2f2f;
        color: white;
        padding: 0 0 20px 0;

        &>p {
          width: 100%;
          text-align: center;
          margin: 0 auto;
          color: gray;
        }

        .but1 {
          width: 1225px;
          height: 145px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 20px;
          margin: 0 auto;
          border-bottom: 1px solid #3d3d3d;

          i {
            margin-right: 10px;
          }
        }

        .but3 {
          width: 230px;
          margin: 10px auto;
          color: gray;
          display: flex;
          justify-content: space-between;
        }

        .but3 span:hover {
          color: white;
        }
      }
    }

    .logo {
      margin-right: 100px;
    }

    .top {
      width: 100%;
      height: 40px;
      background: #3d3d3d;
      position: relative;
      display: flex;
      align-items: center;

      .right {
        position: absolute;
        right: 160px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        color: rgb(184, 181, 181);

        ul {
          list-style: none;
          display: flex;
          justify-content: space-around;

          li {
            // width: 100%;
            height: 40px;
            line-height: 40px;
            margin: 0 10px;

            a {
              color: rgb(184, 181, 181);
            }
          }

          li a:hover {
            color: white;
          }
        }

        .cart {
          color: ghostwhite;
          background: #424242;
          height: 40px;
          padding: 0 20px;
          line-height: 40px;
          color: rgb(184, 181, 181);
        }

        .cart:hover {
          background: white;
          color: orangered;
        }
      }
    }

    header {
      width: 1225px;
      height: 60px;
      margin: 20px auto;

      .nav {
        width: 100%;
        height: 100%;
        position: relative;

        // background: #000;
        .search {
          position: absolute;
          right: 0;
        }
      }
    }

  }
</style>